<template>
  <div>
    <h2>弹框</h2>
    <el-dialog :title="Info.isAdd ? '添加角色' : '编辑角色'" :visible.sync="Info.isShow" center :before-close="del">
      <el-form :model="roleFrom" :rules="rules" ref="menuRef">
        <el-form-item prop="rolename" label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="roleFrom.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <el-tree ref="tree" :data="$store.getters['menu/getMenu']" show-checkbox node-key="id" :props="{
              children: 'children',
              label: 'title',
            }" default-expand-all>
          </el-tree>
        </el-form-item>
        <el-form-item label="开关" :label-width="formLabelWidth">
          <el-switch v-model="roleFrom.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
            :inactive-value="2">
          </el-switch>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="del">取 消</el-button>
        <el-button @click="ok" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { roleAdd, roleInfo,roleEdit } from '../../request/api'
export default {
  props: ['Info'],
  data() {
    return {

      formLabelWidth: '120px',
      roleFrom: {
        rolename: '',//角色名称
        stringmenus: '',//角色权限 id数组'2,3,4' 字符串
        status: 1,//状态1正常2禁用number
      },
      rules: {
        rolename: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
      }
    };

  },
  mounted() {
    // 减少对服务端发起请求，如何实现？ 判断菜单列表是否存在
    if (this.$store.getters["menu/getMenu"].length == 0) {
      //调用菜单行动
      this.$store.dispatch("menu/getMenuListAction");
    }
  },
  methods: {
    del() {
      this.$emit('del', false);
      this.reset();
    },
    reset() {
      this.roleFrom = {
        rolename: "", //角色名称string
        menus: "", //角色权限 id数组'2,3,4' 字符串
        status: 1, //状态1正常2禁用number
      };
      this.$refs.menuRef.resetFields(); //规则验证
      //清空树节点的选中状态
      this.$refs.tree.setCheckedKeys([]);
    },
    //封装数据回显的方法
    async lookup(id) {
      let res = await roleInfo({ id });
      console.log(res);
      this.roleFrom = res.list;
      this.roleFrom.id = id;
      /* 
        后端返回的角色权限menus的数据类型是字符串 格式：‘1,2,3,4’ 
        而当前tree组件需要的数据格式是数组： [1,2,3,4]    
      */
      this.$refs.tree.setCheckedKeys(this.roleFrom.menus ? this.roleFrom.menus.split(',') : []);
    },
    //确认
    ok() {
      //判断  
      this.$refs.menuRef.validate((val) => {
        if (val) {
          // 1，添加
          this.roleFrom.menus = this.$refs.tree.getCheckedKeys().join(",");

          if (this.Info.isAdd) {

            roleAdd(this.roleFrom).then((res) => {

              if (res.code == 200) {
                // console.log(res);
                this.$message.success(res.msg);
                //关闭弹框
                this.del();
                //获取列表
                this.$store.dispatch("role/getRoleListAction");
              } else {
                this.$message.error(res.msg);
              }

              // console.log(res, '教的');
            })


            console.log(this.roleFrom, '11111111111111');
          } else {
            // 2，编辑
            roleEdit(this.roleFrom).then((res) => {

              if (res.code == 200) {
                // console.log(res);
                this.$message.success(res.msg);
                //关闭弹框
                this.del();
                //获取列表
                this.$store.dispatch("role/getRoleListAction");
              } else {
                this.$message.error(res.msg);
              }

              // console.log(res, '教的');
            })
          }
        }

      })
    }
  }
};
</script>

<style lang="scss" scoped></style>